<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>减少数据读取次数</title>
  <!-- <title>克隆优化节点操作</title> -->
  <!-- <title>优化节点添加</title> -->
  <!-- <title>For循环优化</title> -->
  <!-- <title>堆快照监控内存</title> -->
  <!-- <title>时间线记录内存变化</title> -->
  <!-- <title>任务管理器监控内存变化</title> -->
</head>

<body>
  <!-- <button id="btn">Add</button> -->

  <!-- <p class="btn">add</p>
  <p class="btn">add</p>
  <p class="btn">add</p>
  <p class="btn">add</p>
  <p class="btn">add</p>
  <p class="btn">add</p>
  <p class="btn">add</p>
  <p class="btn">add</p>
  <p class="btn">add</p>
  <p class="btn">add</p>
  <p class="btn">add</p> -->

  <!-- 页面中有一个 p 标签，要创建一个和它一样的标签 -->
  <!-- <p id="box1">old</p> -->

  <!-- <div id="skip" class="skip"></div> -->

  <div id="box" style="width: 100px; height:100px;"></div>
  <script>
    var oBox = document.getElementById('box')
    var test = ele => {
      let w = ele.offsetWidth
      let h = ele.offsetHeight
      return w * h
    }
    var test = ele => {
      return ele.offsetWidth * ele.offsetHeight
    }
    console.log(test(oBox))

    // var oBox = document.getElementById('skip')
    // // function hasEle(ele, cls) {
    // //   return ele.className == cls
    // // }

    // function hasEle(ele, cls) {
    //   var clsName = ele.className
    //   return clsName == cls
    // }
    // console.log(hasEle(oBox, 'skip')) // true

  // // 使用创建节点并添加的方式
  // for (var i = 0; i < 3; i++) {
  //   var oP = document.createElement('p')
  //   oP.innerHTML = i
  //   document.body.appendChild(oP)
  // }

  // // 使用克隆 p 标签的方式
  // var oldP = document.getElementById('box1')
  // for (var i = 0; i < 3; i++) {
  //   var newP = oldP.cloneNode(false)
  //   newP.innerHTML = i
  //   document.body.appendChild(newP)
  // }

    // // 使用普通方法创建节点 p， 将 p 节点加到文档末尾
    // for (var i = 0; i < 10; i++) {
    //   var oP = document.createElement('p')
    //   oP.innerHTML = i
    //   document.body.appendChild(oP)
    // }

    // // 创建一个文档碎片容器，将 p 节点放入文档碎片容器的末尾
    // // 最后再将文档最偏容器放入 body 的末尾
    // const fragEle = document.createDocumentFragment()
    // for (var i = 0; i < 10; i++) {
    //   var oP = document.createElement('p')
    //   oP.innerHTML = i
    //   fragEle.appendChild(oP)
    // }
    // document.body.appendChild(fragEle)


    // var aBtns = document.getElementsByClassName('btn')

    // for (var i = 0; i < aBtns.length; i++) {
    //   console.log(i)
    // }

    // for (var i = 0, len = aBtns.length; i < len; i++) {
    //   console.log(i)
    // }

    // // 代码 1
    // function foo() {
    //   var el = document.getElementById('btn')
    //   el.onclick = function () {
    //     console.log(el.id)
    //   }
    // }
    // foo()

    // // 代码 2
    // function foo() {
    //   var el = document.getElementById('btn')
    //   el.onclick = function () {
    //     console.log(el.id)
    //   }
    //   el = null
    // }
    // foo()

    // function getBtn() {
    //   let oBtn1 = document.getElementById('btn1')
    //   let oBtn2 = document.getElementById('btn2')
    //   let oBtn3 = document.getElementById('btn3')
    //   let oBtn4 = document.getElementById('btn4')
    //   let oBtn5 = document.getElementById('btn5')
    //   let oBtn6 = document.getElementById('btn6')
    // }
    // function getBtn2() {
    //   let obj = document
    //   let oBtn1 = obj.getElementById('btn1')
    //   let oBtn2 = obj.getElementById('btn2')
    //   let oBtn3 = obj.getElementById('btn3')
    //   let oBtn4 = obj.getElementById('btn4')
    //   let oBtn5 = obj.getElementById('btn5')
    //   let oBtn6 = obj.getElementById('btn6')
    // }
    // var tmpEle

    // function fn() {
    //   var ul = document.createElement('ul')
    //   for (var i = 0; i < 10; i++) {
    //     var li = document.createElement('li')
    //     ul.append(li)
    //   }
    //   tmpEle = ul
    //   // tmpEle = null
    // }

    // document.getElementById('btn').addEventListener('click', fn)



    // const arrList = []

    // function test(){
    //   for(let i = 0;i< 100000;i++){
    //     document.body.appendChild(document.createElement('p'))
    //   }
    //   arrList.push(new Array(100000).join('x'))
    // }

    // document.getElementById('btn').addEventListener('click', test)

    // const oBtn = document.getElementById('btn')
    // oBtn.onclick = function(){
    //   let arrList = new Array(1000000)
    // }
  </script>
</body>

</html>